<template>
  <view class="page page-login">
    <!-- 		<u-navbar title="登录" bgColor="transparent" :autoBack="true">
		</u-navbar> -->
    <view class="page-inner">
      <view class="logo-box">
        <image
          src="@/static/login/login-phone-succ.png"
          mode=""
          class="login-logo"></image>
      </view>
      <view class="text-box">
        <view class="text-1">登录成功，只差一步</view>
        <view class="text-2">请点击授权头像，用于信息显示</view>
      </view>
      <view class="action-box">
        <button
          class="btn-avatar flex-center"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar">
          授权头像
        </button>
      </view>
      <view class="home-box">
        <view class="back-index flex-center" @click="do_to_index()">
          暂不授权
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  watch: {},
  onLoad(option) {},
  onShow() {},
  methods: {
    do_to_index() {
      console.log("回到首页");
      this.toRoute("index");
    },

    //处理头像
    onChooseAvatar(e) {
      console.log("头像获取", e);
      let file = e.detail.avatarUrl;

      this.$apiUpload({
        url: "/upload",
        method: "post",
        data: {
          //action: 'index_localUpload', //login
          file,
          // if_touxiang: 1
        },
      }).then((res) => {
        if (res.code == 200) {
          this.edit_avatar_nick(res.data.path);
        }
      });
    },
    //提交头像昵称
    edit_avatar_nick(image) {
      var parmas = {
        image: image,
        // nickname: '',
      };
      this.$api({
        url: "/updateUser",
        method: "post",
        data: {
          //action: 'users_editInfo',
          ...parmas,
        },
      }).then((res) => {
        this.$logjson("users_editInfo", res);
        if (res.code == 200) {
          this.$store.commit("edit_vuex_user", parmas);
          this.toRoute("/index");
          // uni.navigateTo({
          // 	url: '/pages/index/index'
          // })
        }
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #ffffff;
}
</style>

<style lang="scss" scoped>
.page-inner {
  position: relative;
  z-index: 10;
  padding: 64rpx 32rpx;
  padding-top: 300rpx;
}

.logo-box {
  text-align: center;

  .login-logo {
    width: 68rpx;
    height: 84rpx;
  }
}

.text-box {
  margin-top: 48rpx;
  text-align: center;

  .text-1 {
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 40rpx;
    color: #000000;
  }

  .text-2 {
    text-align: center;
    margin-top: 18rpx;

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #828282;
  }
}

.action-box {
  margin-top: 172rpx;
  padding: 0 32rpx;
  display: flex;
  justify-content: center;

  .btn-avatar {
    text-align: center;
    width: 100%;
    height: 88rpx;
    background: #cb0011;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #ffffff;
  }
}

.home-box {
  margin-top: 40rpx;
  padding: 0 32rpx;
  display: flex;
  justify-content: center;

  .back-index {
    text-align: center;
    width: 100%;
    height: 88rpx;
    background: #f6f6f6;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-weight: normal;
    font-size: 28rpx;
    color: #333333;
  }
}
</style>
